import { onMounted, onUnmounted } from "vue";

/**
  大屏适配的 hooks
 */
export function useScalePage(option) {
    const resizeFunc = triggerScale();

    onMounted(() => {
        triggerScale();
        window.addEventListener("resize", resizeFunc);
    });
    window.onresize = () => {
        window.location.reload();
    };
    onUnmounted(() => {
        window.removeEventListener("resize", resizeFunc);
    });

    function triggerScale() {
        let targetX = option?.targetX || 1920;
        let targetY = option?.targetY || 1080;
        let targetRatio = option?.targetRatio || 16 / 9;

        let currentX = document.documentElement.clientWidth || document.body.clientWidth;
        let currentY = document.documentElement.clientHeight || document.body.clientHeight;

        let scaleRatio = currentX / targetX;
        let currentRatio = currentX / currentY;

        if (currentRatio > targetRatio) {
            scaleRatio = currentY / targetY;
            document.body.style = `
            width:${targetX}px; 
            height:${targetY}px;
            transform: scale(${scaleRatio}) translateX(-50%);
            left: 50%;
            position: relative;
            box-sizing: border-box;
            transform-origin: left top;
            `;
            document.getElementsByTagName("html")[0].style = "background-color:#1B3646";
        } else {
            document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`;
        }
    }
}
